<template>
  <v-navigation-drawer
    v-model="userDrawer"
    location="right"
    className="w-full"
    :width="config.screenWidth"
  >
    <div className="m-1 flex justify-between items-center">
      <div className="px-3">好友信息</div>
      <v-icon :icon="mdiChevronLeft" size="50" @click="userDrawer = false" />
    </div>
    <div className="w-full h-[80vh] flex justify-center items-center">
      <div
        className="h-[40vh] flex flex-col justify-around items-center text-2xl"
      >
        <v-avatar :image="userInfo.getHeader(friendInfo?.avatar)" size="80" />
        <div>{{ friendInfo?.username }}</div>
        <div>
          <v-icon
            :icon="friendInfo?.sex === 1 ? mdiGenderMale : mdiGenderFemale"
            size="20"
            :color="friendInfo?.sex === 1 ? 'blue-darken-3' : 'pink-darken-1'"
          />
        </div>
      </div>
    </div>
    <div className="w-full px-2">
      <v-btn block @click="toChat()">发消息</v-btn>
    </div>
  </v-navigation-drawer>
</template>

<script setup lang="ts">
import { addChatList, getUserInfoById } from "@/api";
import { useConfig } from "@/store/localConfig";
import { useUserInfoStore } from "@/store/userInfo";
import { useSocketInfoStore } from "@/store/webSocket";
import { mdiChevronLeft, mdiGenderFemale, mdiGenderMale } from "@mdi/js";
import { ref } from "vue";
import { useRouter } from "vue-router";

const userInfo = useUserInfoStore();
const webSocket = useSocketInfoStore();
const friendInfo = ref<USER.info>();
const userDrawer = ref<boolean>(false);
const config = useConfig();
const router = useRouter()

// 初始化信息
const getUserInfo = (id: number) => {
  userDrawer.value = true;
  getUserInfoById(Number(id)).then((res) => {
    friendInfo.value = res;
  });
};

// 跳转聊天
const toChat = () => {
  
  if (!friendInfo.value) return;
  let item: USER.info = {
    id: friendInfo.value.id,
    username: friendInfo.value.username,
    avatar: friendInfo.value.avatar,
    sex: friendInfo.value.sex,
    activeStatus: friendInfo.value.activeStatus,
  };

  // 添加到会话列表
  addChatList(userInfo.user.id, item.id);
  webSocket.curChatUser = item;
  userDrawer.value = false;
  router.push({ path: "/chatBox", query: { tid: item.id } });
};

defineExpose({
  getUserInfo,
});
</script>

<style></style>
